<template>
    <div class="app-container">
        <el-table v-loading="loading" :data="list">
            <!-- <el-table-column label="方案id" prop="planId"></el-table-column> -->
            <el-table-column label="车型信息" prop="modelInfo"></el-table-column>
            <el-table-column label="座位" prop="seating">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.seat" :value="scope.row.seating"/>
                  </template>
            </el-table-column>
            <el-table-column label="运营分类" prop="operatingClassification"></el-table-column>
            <el-table-column label="均价" prop="averagePrice"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button type="text" @click="checked(row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="选择套餐" width="1100px" destroy-on-close append-to-body :visible.sync="showtaocan">
            <el-table v-loading="loading2" :data="modelMealList">
                <!-- <el-table-column label="方案套餐id" prop="planMealId"></el-table-column> -->
                <el-table-column label="套餐名称" prop="mealName"></el-table-column>
                <el-table-column label="套餐天数" prop="days"></el-table-column>
                <el-table-column label="备注" prop="remark"></el-table-column>
                <el-table-column label="折扣" prop="discount"></el-table-column>
                <el-table-column label="均价" prop="averagePrice"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="checkedtaocan(row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import * as api from '@/api/luxuryOrder/index'

export default {
    props: ['storeId', 'startTime', 'endTime'],
     dicts: ['seat'],
    data() {
        return {
            loading: false,
            loading2: false,
            list: [],
            pageNum: 1,//页码   必选
            pageSize: 10, //每页显示数据 必选
            loading: false,
            nowChecked: null, // 当前选择
            showtaocan: false, // 显示选择套餐
            modelMealList: [], // 套餐列表
        };
    },
    computed: {
        formData() {
            const formData = {
                storeId: this.storeId,//预定取车门店  必传
                startTime: this.startTime,//租赁开始时间 必传
                endTime: this.endTime,//租赁结束时间 必传
                pageNum: this.pageNum,//页码   必选
                pageSize: this.pageSize,//每页显示数据 必选
            };
            return formData;
        },
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            this.loading = true;
            api.classificationMoldelList(this.formData).then(res => {
                this.list = res.rows || [];
                this.loading = false;
            })
        },
        /** 选择车型 */
        async checked(row) {
            this.nowChecked = row;
            this.showtaocan = true;
            await this.getmodelMealList(row.planId);
            this.modelMealList.unshift({
                planId: null, // 方案id
                planMealId: null, // 套餐id
                mealName: '均价', // 套餐名称
                days: '--', // 套餐天数
                remark: '--', // 备注
                discount: '--', // 折扣
                averagePrice: row.averagePrice, // 均价
            });
        },
        /** 查询套餐 */
        getmodelMealList(planId) {
            this.loading2 = true;
            return api.modelMealList({
                planId: planId,
                startTime: this.startTime,
                endTime: this.endTime,
            }).then(response => {
                this.modelMealList = response?.data || [];
                this.loading2 = false;
            }).catch(err => { this.loading2 = false; });
        },
        /** 选择套餐 */
        checkedtaocan(row) {
            this.$emit('checked', {
                Moldel: this.nowChecked, // 当前选择车型
                Meal: row, // 当前选择套餐
            });
        },
    },
}
</script>
